import React,{useEffect} from 'react'
import { useHistory } from 'react-router-dom'
import { useObserver } from 'mobx-react-lite';
import useStore from '../../context/useStore';
import { IUserInfo} from '../../utils/interface';
import "./My.scss"
const My: React.FC = () => {
  let { my } = useStore();
  // let [myCon, setMyCon] = useState<IUserInfo>(Object)
  let history = useHistory()
  useEffect(() => {
    my.getInfo()
  }, [])
    //跳转我的资料
    function goDetail(){
      history.push({
        pathname: '/main/myprofile',
        state: {
          ...my.str 
        }
      })
    }
  return useObserver(() => (
    <div className="my">
      <div className='header'  onClick={goDetail}>
            <div className='img'>
                <img src={(my.str as IUserInfo).avatar} alt="" />
            </div>
            <div className='myBody'>
                <p>{(my.str as IUserInfo).nickname}</p>
                <p>{(my.str as IUserInfo).mobile}</p>
            </div>
            <div className='myDetail'>
            <svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2600" width="20" height="20"><path d="M723.696401 533.102744c0.486519-0.973037 1.337926-1.824445 1.702815-2.797482 8.514075-17.757928 5.716593-39.651265-9.365483-53.881934L372.30835 151.307281c-18.730966-17.757928-48.28697-16.906521-66.044898 1.824445-17.757928 18.730966-16.906521 48.28697 1.824445 66.044898l308.452785 291.789524L309.304193 807.012709c-18.609336 17.879558-19.095855 47.435562-1.216296 66.044898 9.122224 9.487112 21.406818 14.352298 33.569783 14.352298 11.676446 0 23.352892-4.378667 32.353486-13.136002l340.563012-328.278418c0.608148-0.608148 0.851408-1.581185 1.581185-2.189334 0.486519-0.486519 0.973037-0.851408 1.581185-1.337926C720.53403 539.670745 721.871956 536.265115 723.696401 533.102744L723.696401 533.102744zM723.696401 533.102744" p-id="2601"></path></svg>
            </div>
        </div>
        <h3>我的服务</h3>
    </div>
  ))
      
    
}
export default My